<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<ul class="comments-list d-none" th:fragment="comments"  v-if="article.articleComments.length > 0">
    <div v-for="(comment, index) in article.articleComments">
        <li class="comment-item"  v-if="(index + comment.childComments.length) < 3 && index <= 1">
        <p class="d-none">{{comment.articleComment.articleCommentId}}</p>
        <div class="post__author author vcard inline-items">
            <img  alt="author" :src="comment.imagePath">
            <div class="author-date">
                <a class="h6 post__author-name fn"
                   :href="'/molihub/lookUserProfilePage?userName=' + comment.userName">{{comment.userName}}</a>
                <div class="post__date">
                    <time class="published" datetime="2017-03-24T18:18">
                        {{comment.articleComment.commentTime}}
                    </time>
                </div>
            </div>

            <a href="#" class="more">
                <svg class="olymp-three-dots-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                </svg>
            </a>

        </div>

        <p>{{comment.articleComment.commentContent}}</p>

        <a href="#" class="post-add-icon inline-items">
            <svg class="olymp-heart-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
            </svg>
            <span>8</span>
        </a>
        <a href="#" class="reply" onclick="showComment(this, 0);return false;">回复</a>
        <ul class="children" v-if="comment.childComments.length > 0">
            <li class="comment-item"  v-for="childComment in comment.childComments">
                <p class="d-none">{{childComment.articleComment.articleCommentId}}</p>
                <div class="post__author author vcard inline-items">
                    <img alt="author" :src="childComment.imagePath">
                    <div class="author-date">
                        <a class="h6 post__author-name fn"
                           :href="'/molihub/lookUserProfilePage?userName=' + childComment.userName">{{childComment.userName}}</a>
                        <div class="post__date">
                            <time class="published" datetime="2017-03-24T18:18">
                                {{childComment.articleComment.commentTime}}
                            </time>
                        </div>
                    </div>

                    <a href="#" class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>
                    </a>

                </div>

                <p>{{childComment.articleComment.commentContent}}</p>

                <a href="#" class="post-add-icon inline-items">
                    <svg class="olymp-heart-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                    </svg>
                    <span>2</span>
                </a>
                <a href="#" class="reply" onclick="showComment(this, 1);return false;">回复</a>
            </li>
        </ul>
    </li>
        <li class="comment-item d-none"  v-else>
            <p class="d-none">{{comment.articleComment.articleCommentId}}</p>
            <div class="post__author author vcard inline-items">
                <img  alt="author" :src="comment.imagePath">
                <div class="author-date">
                    <a class="h6 post__author-name fn" href="#">{{comment.userName}}</a>
                    <div class="post__date">
                        <time class="published" datetime="2017-03-24T18:18">
                            {{comment.articleComment.commentTime}}
                        </time>
                    </div>
                </div>

                <a href="#" class="more">
                    <svg class="olymp-three-dots-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                    </svg>
                </a>

            </div>

            <p>{{comment.articleComment.commentContent}}</p>

            <a href="#" class="post-add-icon inline-items">
                <svg class="olymp-heart-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                </svg>
                <span>8</span>
            </a>
            <a href="#" class="reply" onclick="showComment(this, 0);return false;">回复</a>
            <ul class="children" v-if="comment.childComments.length > 0">
                <li class="comment-item"  v-for="childComment in comment.childComments">
                    <p class="d-none">{{childComment.articleComment.articleCommentId}}</p>
                    <div class="post__author author vcard inline-items">
                        <img alt="author" :src="childComment.imagePath">
                        <div class="author-date">
                            <a class="h6 post__author-name fn" href="#">{{childComment.userName}}</a>
                            <div v-if="comment.toUserName != null">
                                <span>回复</span>
                                <a href="'lookUserProfilePage?userName'+comment.toUserName">{{comment.toUserName}}</a></div>
                            <div class="post__date">
                                <time class="published" datetime="2017-03-24T18:18">
                                    {{childComment.articleComment.commentTime}}
                                </time>
                            </div>
                        </div>

                        <a href="#" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>

                    </div>

                    <p>{{childComment.articleComment.commentContent}}</p>

                    <a href="#" class="post-add-icon inline-items">
                        <svg class="olymp-heart-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                        </svg>
                        <span>2</span>
                    </a>
                    <a href="#" class="reply" onclick="showComment(this, 1);return false;">回复</a>
                </li>
            </ul>
        </li>
    </div>
    <a :href="'read-article?uId='+article.article.userId+'&uName='+article.author.userName+'&aId='+
                                article.article.articleId+'&title='+article.article.articleTitle"
       class="more-comments"
       v-if="article.articleComments.length >= 3">View more comments <span>+</span></a>
</ul>
<!--评论弹窗-->
<div class="modal fade" th:fragment="commentModal" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-title">
                <h3 id="reply-name"></h3>
            </div>
            <div class="modal-body">
                <div class="post__author author vcard inline-items">
                    <div th:if="${session.loginUser != null}">
                        <img th:src="${session.loginUser.imagePath}" alt="author">
                    </div>
                    <div class="form-group with-icon-right is-empty w-75">
                        <textarea class="form-control" placeholder="" id="comment-content"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="publishReplyComment();">发布</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>